<script lang="ts" setup>
import { QForm, QTable, type FormItemRows, type TableColums } from '@meetjs/element-plus-kit'
import { warnBox } from '@/utils/utils'
import EditDialog from './components/EditDialog.vue'
import { getDicts } from '@/api/system/dict'
import type { IGetDictsRes } from '@/api/system/dict/type'
import { delMenu, listMenu } from '@/api/system/menu'
import { checkPermission } from '@/utils/permission'
import type { Menu } from '@/api/system/menu/type'
import { formatDate } from '@/utils/day'

const sysNormalDisable = ref<IGetDictsRes>([])
// form
const formValue = ref({
	menuName: '',
	status: ''
})
const formOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '菜单名称',
		prop: 'menuName'
	},

	{
		type: 'select',
		label: '菜单状态',
		prop: 'status',
		options: sysNormalDisable as unknown as any[],
		attrs: {
			style: 'width: 200px'
		}
	}
])

// table
const loading = ref(false)

const tableData = ref<Menu[]>([])
const columns = ref<TableColums[]>([
	{
		label: '菜单名称',
		prop: 'menuName',
		align: 'left'
	},
	{
		label: '图标',
		prop: 'icon',
		type: 'slot'
	},
	{
		label: '排序',
		prop: 'orderNum',
		width: '60px'
	},
	{
		label: '权限标识',
		prop: 'perms'
	},
	{
		label: '组件路径',
		prop: 'component'
	},
	{
		label: '状态',
		prop: 'status',
		type: 'slot'
	},
	{
		label: '创建时间',
		prop: 'createTime',
		showOverflowTooltip: true,
		formatter: v => formatDate(v.createTime)
	},
	{
		prop: 'action',
		fixed: 'right',
		label: '操作',
		width: '200px',
		align: 'center'
	}
])

const getTableData = async () => {
	try {
		loading.value = true
		const res = await listMenu({
			...formValue.value
		})
		tableData.value = res.rows
	} finally {
		loading.value = false
	}
}
const dialogVisible = ref(false)
const dialogParentId = ref(0)
const dialogId = ref<number | null>(null)
export type IDialogFlag = 'add' | 'addChild' | 'edit' | ''
const dialogFlag = ref<IDialogFlag>('add')
const handelAdd = async () => {
	// 新增弹窗
	dialogParentId.value = 0
	dialogId.value = null
	dialogFlag.value = ''
	dialogVisible.value = true
	await nextTick()
	dialogFlag.value = 'add'
}
const tableRef = ref()
const flag = ref(false)
const isShowTable = ref(true)
const toggleExpandAll = () => {
	flag.value = !flag.value
}

watch(
	() => flag.value,
	() => {
		isShowTable.value = false
		nextTick(() => {
			isShowTable.value = true
		})
	}
)

const handelEdit = async (row: Menu, type: 'edit' | 'addChild' = 'edit') => {
	if (type === 'addChild') {
		dialogParentId.value = row.id
		dialogId.value = null
	} else {
		dialogParentId.value = row.parentId
		dialogId.value = row.id
	}

	dialogFlag.value = ''
	dialogVisible.value = true
	await nextTick()
	dialogFlag.value = type
}
const handelDelete = async (rowId: number) => {
	await warnBox()
	await delMenu(rowId)
	ElMessage.success('删除成功')
	getTableData()
}

function init() {
	getDicts('sys_sys_normal_disable').then(data => {
		sysNormalDisable.value = data
	})
}
init()

onMounted(() => {
	getTableData()
})
</script>
<template>
	<div class="table-page-box">
		<div class="filter-box">
			<QForm
				inline
				:model="formValue"
				:form-options="formOptions"
				:buttons="['search', 'reset']"
				@search="getTableData"
				@reset="getTableData"
			/>
		</div>
		<div class="table-box">
			<QTable
				v-if="isShowTable"
				ref="tableRef"
				:default-expand-all="flag"
				:data="tableData"
				:columns="columns"
				:loading="loading"
				style="width: 100%"
				row-key="id"
				@pageChange="getTableData"
			>
				<template #headerLeft>
					<el-button
						v-if="checkPermission(['system:dept:add'])"
						type="primary"
						@click="handelAdd"
					>
						新增
					</el-button>
					<el-button @click="toggleExpandAll"> 展开/折叠 </el-button>
				</template>
				<template #icon="{ row }">
					<SvgIcon :icon-class="row.icon" />
				</template>
				<!-- table-状态 -->
				<template #status="{ row }">
					<DictTag
						:value="row.status"
						:options="sysNormalDisable"
					/>
				</template>
				<template #action="{ row }">
					<el-button
						v-if="checkPermission(['system:menu:edit'])"
						type="primary"
						link
						@click="handelEdit(row)"
					>
						修改
					</el-button>
					<el-button
						v-if="checkPermission(['system:menu:add'])"
						type="primary"
						link
						@click="handelEdit(row, 'addChild')"
					>
						新增
					</el-button>
					<el-button
						v-if="checkPermission(['system:menu:remove'])"
						type="danger"
						link
						@click="handelDelete(row.id)"
					>
						删除
					</el-button>
				</template>
			</QTable>
		</div>
		<EditDialog
			:id="dialogId"
			v-model="dialogVisible"
			:parent-id="dialogParentId"
			:flag="dialogFlag"
			@refresh="getTableData"
		/>
	</div>
</template>
